<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2022-11-04 09:45:24
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2023-08-04 15:11:37
 * @FilePath: \backstage - 副本\src\components\public\el-pagination.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <!-- :style="{ 'width': treelength ? 'calc(100vw - 430px)' : 'calc(100vw - 241px)' }" -->
    <div class="app-container-table-pagination">

        <el-pagination :background="background" :page-sizes="pageSizes" :current-page.sync="currentPage"
            :page-size.sync="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :layout="layout" :total="total">
        </el-pagination>
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: 'Pagination',
    props: {
        background: {
            type: Boolean,
            default: true
        },
        treelength: {
            type: Boolean,
            default: false
        },
        info: {
            type: Object,
            default: () => {
                return {}
            }
        },
        pageSizes: {
            type: Array,
            default: () => {
                return [15, 30, 60, 100]
            }
        },
        layout: {
            type: String,
            default: 'total, sizes, prev, pager, next, jumper'
        },
        total: {
            required: true,
            type: Number,
            default: 0
        },
        pageNum: {
            type: Number,
            default: 1
        },
        limit: {
            type: Number,
            default: 10
        }
    },
    computed: {
        currentPage: {
            get() {
                return this.pageNum
            },
            set(val) {
                this.$emit('update:pageNum', val)
            }
        },
        pageSize: {
            get() {
                return this.limit
            },
            set(val) {
                this.$emit('update:limit', val)
            }
        }
    },
    methods: {
        handleSizeChange(val) {
            this.currentPage = 1;
            this.$emit('pagination', { pageNum: this.currentPage, limit: val })
        },
        handleCurrentChange(val) {
            this.$emit('pagination', { pageNum: val, limit: this.pageSize })
        }
    }
}
</script>
  
<style scoped>
.page-content {
    text-align: right;
    margin: 10px 10px 0 0;
}
</style>
  